<template>
  <div class="edit-personal-info-content">
    <el-form label-position="top" v-loading="formLoading" :model="form" :rules="rules" ref="form">

      <el-form-item label="举报类型" prop="classId">
        <el-cascader
            v-model="form.classId"
            :options="options"
            :props="optionProps"
            :show-all-levels="false"
            ></el-cascader>
      </el-form-item>
      <el-form-item label="举报内容" prop="content">
          <el-input type="textarea" placeholder="请输入举报内容" v-model="form.content"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getReportClassListApi, insertReportApi} from "@/api/position";

export default {
  name: "Report",
  components: {},
  emits: ['dialogVisible'],
  props:['eid','pid'],
  data() {
    return {
      formLoading:false,
      form: {
        classId:'',
        content: '',
        eid: 0,
        pid: 0
      },
      rules: {
        classId: [
          {required: true, message: '请选择举报类型', trigger: 'blur'},
        ],
        content:[{
          required: true, message: '请填写举报内容', trigger: 'blur'
        }]
      },
      options: [],
      optionProps: {
        value: 'id',
        label: 'className',
        children: 'modelList',
        emitPath: true
      },
    }

  },
  methods: {
    getReportClass(){
      this.formLoading=true
      getReportClassListApi().then((res)=>{
        this.options=res ?? [];
        console.log(this.options)
      }).finally(()=>{
        this.formLoading=false
      }).catch(()=>{

      })
    },
    submit(){
      this.$refs['form'].validate((valid) => {
        if(valid)
        {
          this.$confirm('您的举报信息已提交，我们会尽快核实并处理，并将处理结果第一时间以短信的方式通知您', '提示', {
            confirmButtonText: '确定',
            showCancelButton:false,
            type: 'success',
          }).then(()=>{
            this.form.eid = this.eid;
            this.form.pid = this.pid;
            insertReportApi(this.form).then(()=>{
              this.$message.success('举报成功');
            }).finally(()=>{
              this.$emit('dialogVisible',false)
            })

          })

        }
      })

    }
  },
  mounted() {
    this.getReportClass();
  }
}
</script>

<style lang="scss" scoped>
.edit-other-content {
  padding: 0 60px;

  .el-date-editor, .el-select {
    width: 100%;
  }
}
</style>
